<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/highcharts.js"></script>
    <script type="text/javascript" src="./js/highcharts-more.js"></script>
    <script type="text/javascript" src="./js/solid-gauge.js"></script>
    <script type="text/javascript" src="./js/test.js"></script>
    <link rel="stylesheet" type="text/css" href="./font/iconfont.css">
    <script type="text/javascript">
        document.write(unescape('%3Clink rel="stylesheet" type="text/css" href="./css/chart.css?v=' + new Date().getTime() + '"%3E'))
        document.write(unescape('%3Cscript src="./js/AdminChart.js?v=' + new Date().getTime() + '" type="text/javascript" %3E%3C/script%3E'));
    </script>
    <style type="text/css">
        .test{
            border-color: red;
        }
    </style>
</head>
<body>
<div style="margin: 20px;border: 1px solid #ccc;overflow: hidden;">
    <div style="width: 100%;">
        <div id="canvas" style="width: 50%;float: left;text-align: center;"></div>
        <div id="canvas1" style="width: 50%;float: right;text-align: center;"></div>
    </div>

    <div id="chart" style="width: 50%;height: 500px;float: left;"></div>
    <div id="chart1" style="width: 50%;height: 500px;float: right;"></div>
</div>
<script type="text/javascript">
    var circle = new Circle({
        selector:'#canvas',
        size:300,
        lineWidth:40,
        clockwise: true,
        animate:true,
        interval:1000,
        fillColor:['#27d5f4', '#92c360'],
    });
    circle.draw(10);
    var circle1 = new Circle({
        selector:'#canvas1',
        size:$(window).width()/2,
        lineWidth:40,
        clockwise: true,
        animate:true,
        interval:1000,
        fillColor:['#27d5f4', '#92c360'],
    });
    circle1.draw(20);
</script>
</body>
</html>